<template>
  <div class="layout">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="selectMenu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
        >
          <template v-for="item in menuL" :key="item.key">
            <template v-if="item.children">
              <el-sub-menu :index="item.key">
                <template #title>
                  <el-icon><component :is="$icon[item.meta.icon]" v-if="item.meta?.icon"></component></el-icon>
                  <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="z.key" v-for="z in item.children" :key="z.key">
                  <el-icon><component :is="$icon[item.meta.icon]" v-if="item.meta?.icon"></component></el-icon>
                  <span>{{z.title}}</span>
                </el-menu-item>
              </el-sub-menu>
            </template>
            <template v-else>
              <el-menu-item :index="item.key">
                <el-icon><component :is="$icon[item.meta.icon]" v-if="item.meta?.icon"></component></el-icon>
                <span>{{item.title}}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script setup lang="ts">
import router from "@/routes/router";
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores";
import {sideBar} from "@/utils/menu";
import '@/styles/_variables.scss'

const selectMenu = (key: string) => {
  router.push({name: key})
}
const menuL = ref([])
onMounted(() => {
  const { userData } = useUserStore()
  menuL.value = sideBar.filter(v => {
    return userData.permission_list.includes(v.key)
  })
})

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
}
</style>